<template>
	<view class="container">
		<view class="form-container">
			<view class="form-item">
				<text class="label">手机号码</text>
				<input class="input" type="number" v-model="userInfo.phone" disabled />
			</view>
			
			<view class="form-item">
				<text class="label">姓名</text>
				<input class="input" type="text" v-model="userInfo.name" placeholder="请输入姓名" />
			</view>
			
			<view class="form-item">
				<text class="label">客户类型</text>
				<input class="input" type="text" v-model="userInfo.type" placeholder="客户类型" />
			</view>
			
			<view class="form-item">
				<text class="label">邮箱</text>
				<input class="input" type="text" v-model="userInfo.email" placeholder="请输入邮箱" />
			</view>
			
			<view class="form-item">
				<text class="label">公司/社区</text>
				<input class="input" type="text" v-model="userInfo.company" placeholder="请输入公司名称" />
			</view>
			
			<view class="form-item">
				<text class="label">客户经理</text>
				<input class="input" type="text" v-model="userInfo.manager" placeholder="客户经理" />
			</view>
			
			<view class="form-item">
				<text class="label">专员</text>
				<input class="input" type="text" v-model="userInfo.specialist" placeholder="专员" />
			</view>
			
			<view class="form-item">
				<text class="label">社区经理</text>
				<input class="input" type="text" v-model="userInfo.communityManager" placeholder="社区经理" />
			</view>
			
			<button class="save-btn" @click="saveInfo">保存信息</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					phone: '',
					name: '',
					type: '',
					email: '',
					company: '',
					manager: '',
					specialist: '',
					communityManager: ''
				}
			}
		},
		onLoad() {
			// 页面加载时获取用户信息
			this.fetchUserInfo();
		},
		methods: {
			// 获取用户信息
			async fetchUserInfo() {
				try {
					// 从本地存储获取用户信息，包括客户ID
					const localUserInfo = uni.getStorageSync('userInfo');
					console.log('本地存储的用户信息:', localUserInfo);
					
					if (!localUserInfo) {
						uni.showToast({
							title: '未找到用户信息',
							icon: 'none'
						});
						return;
					}
					
					// 检查是否存在客户ID（customerId）
					if (localUserInfo.customerId) {
						// 使用客户ID获取用户详细信息
						const response = await this.getUserInfo(localUserInfo.customerId);
						
						if (response.code === 0) {
							// 更新用户信息
							this.userInfo = {
								phone: localUserInfo.account || localUserInfo.phone || '',
								name: response.data.name || '',
								type: response.data.type || '',
								email: response.data.email || '',
								company: response.data.company || response.data.community || '',
								manager: response.data.manager || '',
								specialist: response.data.specialist || '',
								communityManager: response.data.communityManager || ''
							};
						} else {
							uni.showToast({
								title: response.msg || '获取用户信息失败',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: '未找到客户ID',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取用户信息异常:', error);
					uni.showToast({
						title: '网络请求异常',
						icon: 'none'
					});
				}
			},
			
			// 调用获取用户信息接口
			getUserInfo(customerId) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'http://localhost:6002/user-client/api/customerInfo/get?id=' + customerId,
						method: 'POST',
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							resolve(res.data);
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},
			
			saveInfo() {
				// 保存用户信息到本地存储
				const userInfo = uni.getStorageSync('userInfo') || {};
				const updatedUserInfo = {
					...userInfo,
					...this.userInfo
				};
				
				uni.setStorageSync('userInfo', updatedUserInfo);
				
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}
	
	.form-container {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
	}
	
	.form-item {
		margin-bottom: 30rpx;
	}
	
	.form-item:last-child {
		margin-bottom: 0;
	}
	
	.label {
		display: block;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 15rpx;
	}
	
	.input {
		width: 100%;
		height: 80rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	
	.input:disabled {
		background-color: #eeeeee;
		color: #999999;
	}
	
	.save-btn {
		margin-top: 50rpx;
		width: 100%;
		height: 80rpx;
		background-color: #007AFF;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 10rpx;
	}
</style>